<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://lib.baomitu.com/axios/0.19.2/axios.js"></script>
</head>
<body>
<div id="app">
    <img :src="product.images[0]" width="100px" height="150px">  <br>
    <label>{{product.pname}}</label><br>
    <label>￥:{{product.price}}</label><br>
    数量:<input type="text" v-model="num"><br>
    <div v-for="type in product.types">
        <button>{{type}}</button>
    </div>
    <button @click="join()">加入购物车</button>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            product:null,
            num:1
        },
        mounted(){
            var pid = window.location.href.split("=")[1];
            axios.get("product/find?pid="+pid).then(res=>{
                console.info(res.data);
                this.product = res.data;
            })
        },
        methods:{
            join:function(){
                var params = new URLSearchParams();
                params.append("pid",this.product.pid);
                params.append("type",this.type);
                params.append("num",this.num);
                axios.post("/cart/add",params)
                    .then(res=>{
                        console.log(res.data)
                    })
            },
            choose:function (type) {
                this.type = type
            }
        }
    });
</script>
</body>
</html>